<div>
    <div class="tab-head" >
        <div>
            <label>{{'cp.title'|translate}}</label>
            <input nz-input style="width: 120px;" [(ngModel)]="page.title" placeholder="{{'cp.title'|translate}}{{'placeholder.search'|translate}}" />
        </div>
        <div>
            <label>{{'cp.displayPriority'|translate}}</label>
            <input nz-input style="width: 120px;" [(ngModel)]="page.displayPriority" placeholder="{{'cp.displayPriority'|translate}}{{'placeholder.search'|translate}}" />
        </div>
        <div>
            <label>{{'cp.createTime'|translate}}</label>
            <nz-range-picker nzFormat='yyyy-MM-dd' style="width: 240px;" [(ngModel)]="dateRange" (ngModelChange)="onChangeDate($event)"></nz-range-picker>
		</div>
		<div>
			<label>{{'cp.status'|translate}}</label>
			<nz-select style="width: 180px;" [(ngModel)]="page.status" nzPlaceHolder="{{'cp.status'|translate}}{{'placeholder.search'|translate}}">
				<nz-option [nzLabel]="cpStatus.all" nzValue=""></nz-option>
				<nz-option [nzLabel]="cpStatus.Y" nzValue="Y"></nz-option>
				<nz-option [nzLabel]="cpStatus.N" nzValue="N"></nz-option>
			</nz-select>
		</div>
        <div >
            <button nz-button class="noradius" nzType="primary" (click)="sherch()">{{'placeholder.search'|translate}}</button>
        </div>
    </div>
    <div class="tab-title">
        {{'cp.listTitle'|translate}}
        <a  routerLink="/basicSetting/CPDel">{{'cp.add'|translate}}</a>
    </div>
    <nz-table class="medical-table" #columnTable [nzSize]='small' [nzTotal]="page.pages" [nzPageIndex]="page.pageNo" nzPageSize="10" (nzPageIndexChange)="changeCurrentPage($event)" [nzFrontPagination]="false" [nzLoading]="tableLoading"
        [nzData]="dataList" [nzScroll]="{ x: '1120px' }">
        <thead>
            <tr>
                <th nzWidth="100px">{{'cp.id'|translate}}</th>
                <th nzWidth="120px">{{'cp.createTime'|translate}}</th>
                <th nzWidth="300px">{{'cp.title'|translate}}</th>
                <th nzWidth="70px">{{'cp.displayPriority'|translate}}</th>
                <th nzWidth="70px">{{'cp.hitCount'|translate}}</th>
                <th nzWidth="80px">{{'cp.status'|translate}}</th>
                <th nzRight="0" nzWidth="180px">{{'cz.title'|translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of columnTable.data">
                <td nzWidth="100px">{{ data.id }}</td>
                <td nzWidth="120px">{{ data.createTime }}</td>
                <td nzWidth="300px">{{ data.title }}</td>
                <td nzWidth="70px">{{ data.displayPriority}}</td>
                <td nzWidth="70px">{{ data.hitCount}}</td>
                <td nzWidth="80px">{{ data.status | getStatus }}</td>
                <td nzRight="0" nzWidth="180px" class='my-cz'>
                    <a *ngIf="data.status == 'Y'" style="color: red;" (click)='onChangeStatus(data,"N")'>{{'cz.disable'|translate}}</a>
                    <a *ngIf="data.status == 'N'" style="color: green;" (click)='onChangeStatus(data,"Y")'>{{'cz.enable'|translate}}</a>
                    <a (click)='updateData(data,true)'>{{'cz.detail'|translate}}</a>
                    <a (click)='updateData(data,false)'>{{'cz.edit'|translate}}</a>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <nz-modal [(nzVisible)]="isVisible" [nzMaskClosable]="false" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel()"
        (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
        <form nz-form class="org-register-one" [formGroup]="validateForm">
            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="providerType">{{'cp.providerType'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('providerType')">
                    <nz-select style="background: #fff;" formControlName="providerType" nzDisabled>
                        <nz-option nzValue="AGENCY" [nzLabel]="providerType.agency"></nz-option>
                        <nz-option nzValue="GUIDE" [nzLabel]="providerType.guide"></nz-option>
                        <nz-option nzValue="OTHER" [nzLabel]="providerType.other"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf='validateForm.value.providerType == "OTHER"'>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="memo">url</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('url')">
                    <input *ngIf='isDel' nz-input id="url" formControlName="url" readonly />
                    <input *ngIf='!isDel' nz-input id="url" formControlName="url" placeholder="需跳转的网址"  />
                </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf='validateForm.value.providerType == "AGENCY"'>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="">{{'providerType.agency'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input *ngIf='isDel' nz-input id="serviceProvider" formControlName="serviceProvider"  readonly />
                    <input *ngIf='!isDel' nz-input id="serviceProvider" formControlName="serviceProvider" readonly  />
                </nz-form-control>
            </nz-form-item>

            <nz-form-item *ngIf='validateForm.value.providerType == "GUIDE" '>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="serviceProvider">{{'providerType.guide'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24">
                    <input *ngIf='isDel' nz-input id="serviceProvider" formControlName="serviceProvider" readonly />
                    <input *ngIf='!isDel' nz-input id="serviceProvider" formControlName="serviceProvider" readonly />
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="title">{{'cp.title'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('title')">
                    <input *ngIf='isDel' nz-input id="title" formControlName="title" readonly/>
                    <input *ngIf='!isDel' nz-input id="title" formControlName="title" />
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="displayPriority">{{'cp.displayPriority'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('title')">
                    <input *ngIf='isDel' nz-input id="displayPriority" formControlName="displayPriority"  readonly/>
                    <input *ngIf='!isDel' nz-input id="displayPriority" formControlName="displayPriority" />
                </nz-form-control>
            </nz-form-item>

            <nz-form-item style="text-align: center;" *ngIf='isDel'>
                <img style="width:379px;height:214px;" src="{{validateForm.get('image')['value']}}" alt="">
            </nz-form-item>

            <nz-form-item *ngIf='!isDel'>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="image">{{'cp.image'|translate}}</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.get('image')">
                    <clain-image-upload formControlName="image"></clain-image-upload>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-modal>
</div>